<!--
 * @Author: your name
 * @Date: 2021-10-25 16:14:26
 * @LastEditTime: 2021-10-28 18:11:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /gitee-project/whale-admin-web/src/views/main/dashboard/components/serviceEcharts/serviceEcharts/orderStatistics.vue
-->
<template>
  <div class="echart-center">
      <div id="earth-bg"></div>
  </div>
</template>

<script lang="ts">
import { useEventListener } from "@vueuse/core"; // 引入监听函数，监听在vue实例中可自动销毁，无须手动销毁
import { defineComponent, reactive, nextTick, onMounted } from "vue";
import * as echarts from "echarts";
import "echarts-gl";
var ROOT_PATH =
  "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";
type EChartsOption = echarts.EChartsOption;
export default defineComponent({
  setup() {
    onMounted(() => {
      nextTick(() => {
        initEchats();
      });
    });
    const initEchats = () => {
      var chartDom: any = document.querySelector("#earth-bg");
      var myChart = echarts.init(chartDom);
      var option: EChartsOption;
      option = reactive({
        backgroundColor: "#000",
        globe: {
          // baseTexture: ROOT_PATH + "/data-gl/asset/earth.jpg",
          baseTexture: "/images/earth.bg.jpeg",
          shading: "lambert",
          // environment: ROOT_PATH + "/data-gl/asset/starfield.jpg",//旋转的背景图
          atmosphere: {
            show: true
          },
          light: {
            ambient: {
              intensity: 0.05
            },
            main: {
              intensity: 1.5
            }
          },
        },
        series: []
      });
      option && myChart.setOption(option);
      useEventListener("resize", () => {
        myChart.resize();
      });
    };
    return {
      initEchats
    };
  }
});
</script>

<style lang="scss" scoped>
.echart-center {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  #earth-bg {
    width: 100%;
    height: 100%;
  }
}
</style>